<template>
  <!-- 单选 -->
  <van-radio-group
    v-if="type=='radio'"
    v-model="elValue"
    :direction="vertical?'vertical':'horizontal'"
    :disabled="disabled"
    @change="changeClick"
  >
    <van-radio
      v-for="(item, index) in option"
      :key="index"
      :name="valuekey&&item&&typeof item=='object'?item[valuekey]:item"
      :disabled="disabledkey&&item&&typeof item=='object'?item[disabledkey]:false"
      :style="vertical?'margin-bottom:12px':''"
    >
      <slot v-if="expand" :item="item" :index="index"></slot>
      <template v-else>{{item&&typeof item=='object'?item[labelkey]:item}}</template>
    </van-radio>
  </van-radio-group>
  <!-- 多选 -->
  <van-checkbox-group
    v-else-if="type=='checkbox'"
    v-model="elValue"
    :direction="vertical?'vertical':'horizontal'"
    :max="checkboxMax"
    :disabled="disabled"
    @change="changeClick"
  >
    <van-checkbox
      v-for="(item, index) in option"
      :key="index"
      :name="valuekey&&item&&typeof item=='object'?item[valuekey]:item"
      :disabled="disabledkey&&item&&typeof item=='object'?item[disabledkey]:false"
      :style="vertical?'margin-bottom:12px':''"
      shape="square"
    >
      <slot v-if="expand" :item="item" :index="index"></slot>
      <template v-else>{{item&&typeof item=='object'?item[labelkey]:item}}</template>
    </van-checkbox>
  </van-checkbox-group>
</template>

<script>
import api from "@/api/api";
import { RadioGroup, Radio, CheckboxGroup, Checkbox } from "vant";
export default {
  components: {
    "van-radio-group": RadioGroup,
    "van-radio": Radio,
    "van-checkbox-group": CheckboxGroup,
    "van-checkbox": Checkbox
  },

  props: {
    obj: {// InputObj
      type: Object,
      default: function () {
        return api.createInputObj();
      }
    },

    objKey: {// 数据对应InputObj的key值
      type: String,
      default: ""
    },

    prefix: {// 提示的文本内容
      type: String,
      default: null
    },

    type: {// radio、checkbox
      type: String,
      default: "radio"
    },

    option: {// 数据
      type: Array,
      default: null
    },

    labelkey: {// 对应数据的显示值的key
      type: String,
      default: null
    },

    valuekey: {// 对应数据的选中值的key
      type: String,
      default: null
    },

    disabledkey: {// 对应数据的禁用key
      type: String,
      default: null
    },

    vertical: {// 是否是垂直方向的延伸
      type: Boolean,
      default: false
    },

    expand: {// 是否允许扩展勾选内容，(增加此参数是由于$slots.default无法判断slot-scope)
      type: Boolean,
      default: false
    },

    checkboxMax: {// 多选的勾选框的最大可选个数
      type: Number,
      default: 1000
    },

    required: {// 是否必填
      type: Boolean,
      default: false
    },

    disabled: {// 是否不可用
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      elValue: []
    }
  },

  watch: {
    obj() {
      this.register();
    },

    objKey() {
      this.register();
    },

    type() {
      this.changeClick(null);
    }
  },

  mounted() {
    this.register();
  },

  destroyed() {
    this.obj._unRegister(this.objKey);
  },

  methods: {
    register() {
      let self = this;
      this.obj._watch(this.objKey, function (value) {
        self.elValue = value;
      }, function (value) {
        if (self.type == "checkbox") {
          if (!value) {
            value = [];
          }
        }
        return value;
      });
      this.obj._register(this.objKey, function () {
        return self.checkData(self.obj[self.objKey], self.required, self.prefix ? self.prefix : "内容");
      });
    },

    checkData(data, required, prefix) {
      let result = api.verifyData(data, null);
      if (result.data == null || result.data.length < 1) {
        if (required) {// 非空判断
          api.toast("请选择" + prefix);
          return false;
        }
        return true;
      }
      return result.success;
    },

    changeClick(value) {
      this.obj[this.objKey] = value;
      this.$emit("change", value);
    }
  }
}
</script>